<template>
  <div class="sd">
    <div class="container">
      <!-- 单图生成界面 -->
      <SDPanel
        v-if="!showBatchGenerate"
        :messages="messages"
        :generating="generating"
        :sd-service-available="sdServiceAvailable"
        @send="sendMessage"
        @toggle-batch="toggleBatchMode"
      />
      <!-- 批量生成界面 -->
      <SDPanel
        v-if="showBatchGenerate"
        :messages="messages"
        :generating="generating"
        :sd-service-available="sdServiceAvailable"
        :batch-mode="true"
        @send="sendMessage"
        @toggle-batch="toggleBatchMode"
      />
    </div>
    <toast-message ref="toast" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { sdApi } from '@/services/sd'
import type { GenerateParams } from '@/services/sd'
import SDPanel from '@/components/SDPanel.vue'
import ToastMessage from '@/components/ToastMessage.vue'

interface Message {
  type: 'text' | 'image'
  content: string
  isUser: boolean
}

const sdServiceAvailable = ref(false)
const messages = ref<Message[]>([])
const generating = ref(false)
const showBatchGenerate = ref(false)

const toast = ref()
const checkSDService = async () => {
  try {
    const response = await sdApi.checkStatus()
    sdServiceAvailable.value = response?.data?.available ?? false
    toast.value?.show(
      sdServiceAvailable.value ? 'SD WebUI 服务已连接' : '请确保 Stable Diffusion WebUI 已启动'
    )
  } catch (error) {
    toast.value?.show('检查 SD WebUI 状态失败')
    sdServiceAvailable.value = false
  }
}

// 初始化时检查服务状态
checkSDService()

const sendMessage = async (data: GenerateParams) => {
  if (!sdServiceAvailable.value || !data.prompt.trim()) return

  generating.value = true
  messages.value.push({ type: 'text', content: data.prompt, isUser: true })

  try {
    const params: GenerateParams = {
      prompt: data.prompt,
      model: data.model,
      negative_prompt: data.negative_prompt,
      width: data.width,
      height: data.height,
      steps: data.steps,
      cfg_scale: data.cfg_scale,
      seed: data.seed,
      enable_hr: data.enable_hr
    }
    const response = await sdApi.generate(params)
    // 处理后端返回的图片数据
    // 如果返回了多张图片（batch_size > 1的情况）
    if (response.data?.images && response.data.images.length > 0) {
      // 将所有图片添加到消息列表中
      for (const image of response.data.images) {
        messages.value.push({ type: 'image', content: image, isUser: false })
      }
    } else if (response.data?.image) {
      // 单张图片的情况
      messages.value.push({ type: 'image', content: response.data.image, isUser: false })
    }
  } catch (error) {
    toast.value?.showError('生成图片失败: ' + error)
  } finally {
    generating.value = false
  }
}

const toggleBatchMode = () => {
  showBatchGenerate.value = !showBatchGenerate.value
}
</script>

<style scoped>
.sd {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.container {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  display: flex;
}
</style>
